<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg"></p>
      <p class="right">可预约总量<span>9999</span>人</p>
    </div>
    <div class="number">
      <span v-for="(item, index) in pople" :key="index">{{ item }}</span>
    </div>
    <!-- echarts图形图标 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
//水球图拓展插件
import "echarts-liquidfill";

let pople = ref("216903人");
//获取dom节点,组件挂载完成后渲染dom节点
let charts = ref();
onMounted(() => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value);
  //设置实例配置项
  mycharts.setOption({
    //标题设置
    title: {
      text: "水球图",
      textStyle: {
        color: "#29fcff", // 这里设置标题颜色为红色
      },
    },
    //x轴，y轴
    // xAxis: {},
    // yAxis: {},
    //系列：决定你展示什么样的图形图标
    series: {
      type: "liquidFill", //系列
      data: [0.8, 0.6, 0.4, 0.2], //数据
      radius: "70%",
    },
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  });
});
</script>

<style scoped lang="scss">
.box {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .top {
    margin-left: 20px;
    .title {
      color: white;
      font-size: 20px;
      margin-left: 20px;
      margin-top: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
      margin-left: 40px;
    }
    .right {
      z-index: 1px;
      float: right;
      color: white;
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .number {
    padding: 5px;
    margin-top: 30px;
    display: flex;
    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #29fcff;
      font-size: 25px;
    }
  }
  .charts {
    width: 100%;
    height: 240px;
  }
}
</style>
